<template>
  <el-dialog :title="showType==1 ? '新增':showType==2 ?'编辑':'查看'"  :visible.sync="addFormVisible" :close-on-click-modal="false">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

      <el-form-item class="item-two">
        <el-col :span="12">
          <el-form-item label="编码" prop="code">
            <el-input v-model="ruleForm.code" :disabled="showType==1?false:true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="名称" prop="name">
            <el-input v-model="ruleForm.name" :disabled="showType==-1?true:false"></el-input>
          </el-form-item>
        </el-col>
        
      </el-form-item>
      <el-form-item class="item-two">
        <el-col >
          <el-form-item label="描述" prop="description">
            <el-input type="textarea" placeholder="请输入描述" v-model="ruleForm.description" :disabled="showType==-1?true:false" :rows="4"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="明细" prop="subButtonList">
        <el-table :data="subButtonList" border style="width: 100%">
          <el-table-column label="编码" align="center">
            <template scope="scope">
              <el-input v-model="subButtonList[scope.$index].code" size="small" :disabled="showType==-1?true:false"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="名称" align="center">
            <template scope="scope">
              <el-input v-model="subButtonList[scope.$index].name" size="small" :disabled="showType==-1?true:false"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="描述" align="center">
            <template scope="scope">
              <el-input v-model="subButtonList[scope.$index].description" size="small" :disabled="showType==-1?true:false"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template scope="scope">
              <el-button class="el-icon-delete" type="primary" size="small" @click="delCell(scope.$index)" :disabled="showType==-1?true:false"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px">
          <el-button class="el-icon-plus" @click="addCell" size="small" :disabled="showType==-1?true:false"> 新增按钮</el-button>
        </div>
      </el-form-item>
    </el-form>
 
    <div slot="footer" class="dialog-footer">
      <el-button @click="addFormVisible = false">取消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')" :disabled="showType==-1?true:false">保存</el-button>
    </div>
  </el-dialog>
</template>
<script>
  export default {
    props:['showType','showUpdate'], 
    data() {
      return {
        addFormVisible: false,
        ruleForm: {
          name: '',
          code:'',
          description:'',
          id:''
        },
        rules: {
          code: [
            {required: true,message: '请输入编码',trigger: 'blur'},
          ],
          name: [
            {required: true,message: '请输入名称',trigger: 'blur'},
          ],

        },
        subButtonList: [],// 明细

      }

    },
    activated(){
      
    },
    methods: {
      addCell() {
        var item = {
          name: '',
          code: '',
          description:''
        }
        this.subButtonList.push(item)
      },
      delCell(index) {
        this.subButtonList.splice(index, 1)
      },
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            this.submitSave()
            
          } 
        });
      },
      async submitSave(){
        let d={
            content:{
                bDefdoc:{
                    id:this.ruleForm.id,
                    name: this.ruleForm.name,
                    code:this.ruleForm.code,
                    description:this.ruleForm.description
                },
                bDefdocSubList:this.subButtonList
            }
            
          };
          let res;
          if(this.showType==1){
            res = await this.$post('/couponSys/bDefdoc/add.json',d);
          }else{
            res = await this.$post('/couponSys/bDefdoc/update.json',d);
          }
          if(res.errcode==0){
            
            if(this.showType==1){
              this.$emit('childMethods',1)
              this.$message.success('添加成功');
            }else{
              this.$emit('childMethods',2)
              this.$message.success('修改成功');
            }
            this.addFormVisible=false;
          }else{
            this.$message.error(res.msg);
          }

      },
      resetForm() {
        this.$refs.ruleForm.resetFields();
      },
    }
  }

</script>

<style lang="scss" scoped>
  

</style>
